<template>
    <div class="onebasicinformation">
        <div class="yanhua">
            <canvas class="yanhua" ref="confettiCanvas"></canvas>
        </div>
        <div class="onebasicinformationclose" @click="goclose"><i class="el-icon-circle-close"></i></div>
        <div class="alertisshow" v-show="alertisshow">
            <div class="alertbox">
                <img class="alertbox-img" src="@/assets/images/red/alertisshow.png" alt="">
            </div>
            <div class="ischoose">
                <div class="istrue" @click="abandon">
                    <img class="istrue-img" src="@/assets/images/red/alertisshow_abandon.png" alt="">
                </div>
                <div class="isfalse" @click="use">
                    <img class="isfalse-img" src="@/assets/images/red/alertisshow_use.png" alt="">
                </div>
            </div>
        </div>
        <div class="onebasicinformationbg" v-if="this.moneyinfo.cardType == 1"><img class="onebasicinformationbg-img"
                src="https://anxd2.oss-cn-shanghai.aliyuncs.com/redPacket/img/red_packet_4_1.jpg" alt=""></div>
        <div class="onebasicinformationbg" v-if="this.moneyinfo.cardType == 0"><img class="onebasicinformationbg-img"
                src="https://anxd2.oss-cn-shanghai.aliyuncs.com/redPacket/img/red_packet_5_1.jpg" alt=""></div>
        <div class="onebasicinformation-text">
            <div class="reflect">可提现金额：
                <div id='main'>
                    <!--   <div class="itemnum"><span>.</span></div> -->
                    <div class="itemnum"><span
                            style=" display: inline-block; width: 6px;height: 6px; background: #fff; border-radius: 50%;"></span>
                    </div>
                    <div v-for="(val, index) in numberArr" :key="index">
                        <!--       <div style="width:35px;height:40px"> -->
                        <div style="width:32px;height:40px">

                            <div class="numberScrollPar">
                                <div v-for="i in 10" :key="i">
                                    <div class="child">{{ i - 1 }}</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <span style=" font-size: 20px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                    元</span>
            </div>
            <!-- <div class="balance">钱包余额：<span> {{ this.moneyinfo.remindMoney }}</span>元 </div> -->
            <div>
                <div class="juxingming">
                    <img class="juxingming-img" src="@/assets/images/red/btn_bg_kuang_1.png" alt="">
                    <div class="balance">钱包余额：<span>{{ this.moneyinfo.remindMoney }}</span>元 </div>
                </div>
            </div>
        </div>
        <div @click="gocollectmoney" class="onebasicinformationbtn"><img class="onebasicinformationbtn-img"
                src="@/assets/images/red/红包4.png" alt=""></div>
        <audio ref="myaudio">
            <!-- <source src="@/assets/images/red/5a6ad6b4b021f.mp3" /> -->
        </audio>
    </div>
</template>
<script>
import confetti from 'canvas-confetti';
import { addwithdrawalcard, updatewithdrawalcard, addpacketstep, searchcardrecord, addburyingpoint, sendRedPacket } from '@/api/http.js'
export default {
    data() {
        return {
            isshow: false,
            alertisshow: false,
            redPacketType: '',
            withdrawalCardStatus: '',
            withdrawalCardId: '',
            withdrawalAmount: '0.00',
            moneyinfo: {
                remindMoney: '0.00'
            },
            yanhuatimeout: "",
            yanhuatime: '',
            settime: "",
            time: "",
            numberArr: [0, 0, 0],
            orderNo: '',
        }
    },
    methods: {
        startConfetti() {
            confetti.create(this.$refs.confettiCanvas, {
                resize: true,
                useWorker: true,
            })({ particleCount: 200, spread: 200 });
        },
        goclose() {
            this.alertisshow = true
        },
        abandon() {
            this.withdrawalCardStatus = 3
            this.getupdatewithdrawalcard(this.withdrawalCardId, this.withdrawalCardStatus)
            this.$router.push({
                path: '/' + this.$route.query.path
            })
        },
        use() {
            // this.$router.go(-1)
            this.alertisshow = false
        },
        gocollectmoney() {
            let me = this
            let music1 = new Audio();
            music1 = require("@/assets/images/red/5a6ad6b4b021f.mp3");
            me.$refs.myaudio.src = music1;
            me.$refs.myaudio.play();
            console.log(this.$refs.myaudio)
            //掉第三方接口
            //withdrawalCardStatus = 1成功
            //withdrawalCardStatus = 2失败
            console.log(this.orderNo)
            sendRedPacket({ orderNo: this.orderNo }).then(res => {
                console.log(res,'第三方体现结果')
                if (this.$route.query.path == 'mmse') {
                    let obj = { buriedPointName: '第一组题结束', function: '1', module: '1', redirectPage: '第二组题', section: '5', orgNo: '' }
                    addburyingpoint(obj).then(res => {
                        console.log(res)
                    })
                } else if (this.$route.query.path == 'emt') {
                    let obj = { buriedPointName: '第二组题结束', function: '1', module: '2', redirectPage: '第三组题', section: '5', orgNo: '' }
                    addburyingpoint(obj).then(res => {
                        console.log(res)
                    })
                }
                let success
                if (res.code == 600) {
                    success = 1
                } else {
                    success = 2
                }
                console.log('success' , success)
                setTimeout(() => {
                    if (success == 1) {
                        this.withdrawalCardStatus = 1
                        this.getupdatewithdrawalcard(this.withdrawalCardId, this.withdrawalCardStatus)
                        this.$router.push({
                            path: '/collectmoney',
                            query: { id: 1, path: this.$route.query.path }
                        })
                    } else if (success == 2) {

                        this.withdrawalCardStatus = 2
                        this.getupdatewithdrawalcard(this.withdrawalCardId, this.withdrawalCardStatus)

                        this.$router.push({
                            path: '/withdrawalfailed',
                            query: { id: 1, path: this.$route.query.path }
                        })
                        // this.$router.push({
                        //     path: '/' + this.$route.query.path
                        // })
                    }
                },1000)


            })



        },
        //获取提现卡金额接口
        getaddwithdrawalcard() {

            if (this.$route.query.path == 'mmse') {

                this.redPacketType = 11

            } else if (this.$route.query.path == 'emt') {
                // let obj = {buriedPointName:'',function:'',module:'',redirectPage:'',section:'',orgNo:''}
                // addburyingpoint(obj).then(res=>{
                //     console.log(res)
                //  })
                this.redPacketType = 12
            }

            addwithdrawalcard(this.redPacketType).then(res => {
                this.orderNo = res.data.orderNo
                console.log(res.data, 'withdrawalCardId')
                this.moneyinfo = res.data
                this.withdrawalCardId = res.data.redPacketId

                this.moneyinf0 = res.data.randomWithdrawalAmount
                const text = this.moneyinf0;
                const chars = text.split('');
                this.numberArr[0] = chars[0]
                this.numberArr[1] = chars[1]
                this.numberArr[2] = chars[2]
                console.log(this.numberArr)
                const element = document.getElementsByClassName('numberScrollPar');
                console.log(element.length)
                for (let i = 0; i < element.length; i++) {
                    const name = 'numberScroll_' + this.numberArr[i];

                    element[i].classList.add(name);
                }
                this.settime = setTimeout(() => {
                    clearInterval(this.time)
                    this.withdrawalAmount = res.data.withdrawalAmount
                    this.yanhuatime = setInterval(() => {
                        this.startConfetti()
                    }, 400)
                    this.yanhuatimeout = setTimeout(() => {
                        clearInterval(this.yanhuatime)
                    }, 1000)
                }, 1000);
            })
        },
        //调用更新提现卡接口
        getupdatewithdrawalcard(withdrawalCardId, withdrawalCardStatus) {
            updatewithdrawalcard(withdrawalCardId, withdrawalCardStatus).then(res => {

                console.log(res)
            })
        }

    },
    created() {
        let url = encodeURIComponent(this.$route.name + '?id=' + this.$route.query.id + '&path=' + this.$route.query.path)
        addpacketstep(url).then(res => {
            console.log(res)
        })
        if (this.$route.query.path == 'mmse') {
            this.redPacketType = 11
        } else if (this.$route.query.path == 'emt') {
            this.redPacketType = 12
        }
        searchcardrecord(this.redPacketType).then(res => {
            console.log(res)
            if (res.data.orderNo) {
                this.orderNo = res.data.orderNo
            }
            if (res.data.status == -1) {
                console.log(this.$route.query.path)
                this.getaddwithdrawalcard()
            } else if (res.data.status == 0) {
                this.withdrawalCardId = res.data.redPacketId
                this.withdrawalAmount = res.data.withdrawalAmount
                this.remindMoney = res.data.remindMoney
                this.moneyinfo = res.data
                this.moneyinf0 = res.data.randomWithdrawalAmount
                const text = this.moneyinf0;
                const chars = text.split('');
                this.numberArr[0] = chars[0]
                this.numberArr[1] = chars[1]
                this.numberArr[2] = chars[2]
                console.log(this.numberArr)
                const element = document.getElementsByClassName('numberScrollPar');
                console.log(element.length)
                for (let i = 0; i < element.length; i++) {
                    const name = 'numberScroll_' + this.numberArr[i];

                    element[i].classList.add(name);
                }
            } else if (res.data.status == 1) {
                this.withdrawalCardId = res.data.redPacketId
                this.withdrawalAmount = res.data.withdrawalAmount
                this.remindMoney = res.data.remindMoney
                this.moneyinf0 = res.data.randomWithdrawalAmount
                const text = this.moneyinf0;
                const chars = text.split('');
                this.numberArr[0] = chars[0]
                this.numberArr[1] = chars[1]
                this.numberArr[2] = chars[2]
                console.log(this.numberArr)
                const element = document.getElementsByClassName('numberScrollPar');
                console.log(element.length)
                for (let i = 0; i < element.length; i++) {
                    const name = 'numberScroll_' + this.numberArr[i];

                    element[i].classList.add(name);
                }
                this.$router.push({
                    path: '/collectmoney',
                    query: { id: 1, path: this.$route.query.path }
                })
                this.moneyinfo = res.data
            } else if (res.data.status == 2) {
                this.withdrawalCardId = res.data.redPacketId
                this.withdrawalAmount = res.data.withdrawalAmount
                this.remindMoney = res.data.remindMoney
                this.moneyinfo = res.data
                this.moneyinf0 = res.data.randomWithdrawalAmount
                const text = this.moneyinf0;
                const chars = text.split('');
                this.numberArr[0] = chars[0]
                this.numberArr[1] = chars[1]
                this.numberArr[2] = chars[2]
                console.log(this.numberArr)
                const element = document.getElementsByClassName('numberScrollPar');
                console.log(element.length)
                for (let i = 0; i < element.length; i++) {
                    const name = 'numberScroll_' + this.numberArr[i];

                    element[i].classList.add(name);
                }
                this.$router.push({
                    path: '/withdrawalfailed',
                    query: { id: 1, path: this.$route.query.path }
                })
            } else if (res.data.status == 3) {
                console.log(1)
                if (this.$route.query.path == 'mmse') {
                    this.redPacketType = 11
                } else if (this.$route.query.path == 'emt') {
                    this.redPacketType = 12
                }
                this.$router.push({
                    path: '/' + this.$route.query.path
                })
            }
        })

    },
    beforeDestroy() {
        clearTimeout(this.settime)
        clearTimeout(this.yanhuatimeout)
        clearInterval(this.time)
        clearInterval(this.yanhuatime)
    }

}
</script>
<style>
.onebasicinformation {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.yanhua {
    width: 100%;
    height: 100%;
    position: absolute;
}

.alertisshow {
    position: absolute;
    margin-top: 60px;
    height: 100%;
    z-index: 99;
}

.alertbox {
    width: 375px;
    height: 434px;
}

.alertbox-img {
    width: 100%;
    height: 100%;
}

.ischoose {
    position: relative;
    top: -135px;
}

.istrue {
    width: 375px;
    height: 43px;
}

.istrue-img {
    width: 100%;
    height: 100%;
}

.isfalse {
    width: 375px;
    height: 57px;
}

.isfalse-img {
    width: 100%;
    height: 100%;
}

.onebasicinformationclose {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 36px;
    width: 45px;
    height: 45px;
    color: #fff;
    text-align: center;
    line-height: 45px;
}

.onebasicinformationbg {

    width: 100%;
    height: 100%;
}

.onebasicinformationbg-img {
    width: 100%;
    height: 100%;
}

.onebasicinformationbtn {
    position: absolute;
    bottom: 70px;
    left: 22%;
    width: 196px;
    height: 63px;
}

.onebasicinformationbtn-img {
    width: 100%;
    height: 100%;
}

.onebasicinformation-text {
    position: absolute;
    top: 62%;
    text-align: center;
    width: 375px;
}

.reflect {
    font-size: 20px;
    color: #fff;
    position: relative;
}

.balance {
    font-size: 20px;
    color: #f5bc00;
    /* margin-top: 28px; */
    font-weight: 500;
    position: absolute;
    top: 5px;
    left: 25px;
}

.juxingming {
    width: 211px;
    height: 36px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    top: 20px;
}

.juxingming-img {
    width: 100%;
    height: 100%;
}

#main {

    width: 26%;
    height: 40px;
    z-index: 4;
    position: absolute;
    left: 60%;
    transform: translateX(-50%);
    top: -12px;
    /* background: white; */
    color: #fff;
    font-size: 40px;
    overflow: hidden;
    font-weight: bold;
    display: flex;
    justify-content: center;
}

.itemnum {
    position: relative;
    /* 
       left: 33px;
    top: -4px;
    */
    left: 32%;
    top: -6%;
}

.numberScrollPar {
    width: 100%;
    height: 100%;
}

.child {
    width: 30px;
    height: 40px;
    line-height: 40px;
    text-align: center;
}

@keyframes numberScroll1 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-40px);
    }
}

@-webkit-keyframes numberScroll1 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-40px);
    }
}

.numberScroll_1 {
    animation: numberScroll1 0.5s;
    -webkit-animation: numberScroll1 0.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll2 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-80px);
    }
}

@-webkit-keyframes numberScroll2 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-80px);
    }
}

.numberScroll_2 {
    animation: numberScroll2 1s;
    -webkit-animation: numberScroll2 1s;
    animation-fill-mode: both;
}

@keyframes numberScroll3 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-120px);
    }
}

@-webkit-keyframes numberScroll3 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-120px);
    }
}

.numberScroll_3 {
    animation: numberScroll3 1.5s;
    -webkit-animation: numberScroll3 1.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll4 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-160px);
    }
}

@-webkit-keyframes numberScroll4 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-160px);
    }
}

.numberScroll_4 {
    animation: numberScroll4 2s;
    -webkit-animation: numberScroll4 2s;
    animation-fill-mode: both;
}

@keyframes numberScroll5 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-200px);
    }
}

@-webkit-keyframes numberScroll5 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-200px);
    }
}

.numberScroll_5 {
    animation: numberScroll5 2.5s;
    -webkit-animation: numberScroll5 2.5s;
    animation-fill-mode: both;
}

@keyframes numberScroll6 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-240px);
    }
}

@-webkit-keyframes numberScroll6 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-240px);
    }
}

.numberScroll_6 {
    animation: numberScroll6 1.2s;
    -webkit-animation: numberScroll6 1.2s;
    animation-fill-mode: both;
}

@keyframes numberScroll7 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-280px);
    }
}

@-webkit-keyframes numberScroll7 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-280px);
    }
}

.numberScroll_7 {
    animation: numberScroll7 1.4s;
    -webkit-animation: numberScroll7 1.4s;
    animation-fill-mode: both;
}

@keyframes numberScroll8 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-320px);
    }
}

@-webkit-keyframes numberScroll8 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-320px);
    }
}

.numberScroll_8 {
    animation: numberScroll8 1.6s;
    -webkit-animation: numberScroll8 1.6s;
    animation-fill-mode: both;
}

@keyframes numberScroll9 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-360px);
    }
}

@-webkit-keyframes numberScroll9 {
    from {
        transform: translateY(0px);
    }

    to {
        transform: translateY(-360px);
    }
}

.numberScroll_9 {
    animation: numberScroll9 1.8s;
    -webkit-animation: numberScroll9 1.8s;
    animation-fill-mode: both;
}

@-webkit-keyframes numberScroll0 {
    0% {
        transform: translateY(0px);
    }

    99% {
        transform: translateY(-360px);
    }

    100% {
        transform: translateY(0px);
    }
}


.numberScroll_0 {
    animation: numberScroll0 1.6s;
    -webkit-animation: numberScroll0 1.6s;
    animation-fill-mode: both;
}
</style>